<template>
  <div>
    <h2>{{ reMsg }}</h2>
    <van-button type="primary" @click="msg = '你好'">修改msg</van-button>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
const isShow = ref<boolean>(true);

interface User {
  name: string;
  score: number;
  sleep: boolean;
}

// reactive
const user = reactive<User>({
  name: "三丰",
  score: 100,
  sleep: false,
});
//computed
const msg = ref<string>("Hello");
const reMsg = computed<string>(() => {
  return msg.value.split("").reverse().join("");
});
// ref结合computed定义复杂数据包类型约束
interface Goods {
  name: string;
  price: number;
}
const goodList = ref<Array<Goods>>([
  {
    name: "手机",
    price: 9990,
  },
  {
    name: "电脑",
    price: 998,
  },
]);
const list = computed<Array<Goods>>(() =>
  goodList.value.filter((item) => {
    return item.price > 1000;
  })
);
</script>

<style scoped></style>
